<template>
	<view>
		<u-popup v-model="paymentPopup" mode="bottom" border-radius="20">
			<view class="popupView">
				<view class="exitView">
					<image class="exitIcon" src="/static/close3.png" @click="close()"></image>
				</view>
				<view class="paymentPrice"><text>¥</text>{{totalPrice}}</view>
				<view class="paymentTips">请选择支付方式</view>
				<view class="columnView" style="flex: 1;">
					<view class="payView" v-if="isWechat" @click="onPayIndex(1)">
						<image class="payIcon" src="/static//weixin.png"></image>
						<text class="payText">微信支付</text>
						<image class="checkIcon" src="/static/selected.png" v-if="payIndex==1"></image>
						<image class="checkIcon" src="/static/unselected.png" v-else></image>
					</view>
					<view class="payView" v-if="isAlipay" @click="onPayIndex(2)">
						<image class="payIcon" src="/static/alipay.png"></image>
						<text class="payText">支付宝支付</text>
						<image class="checkIcon" src="/static/selected.png" v-if="payIndex==2"></image>
						<image class="checkIcon" src="/static/unselected.png" v-else></image>
					</view>
					<view class="payView" v-if="isBalance" @click="onPayIndex(3)">
						<image class="payIcon" src="/static/balance.png"></image>
						<text class="payText">余额支付({{balance}})</text>
						<image class="checkIcon" src="/static/selected.png" v-if="payIndex==3"></image>
						<image class="checkIcon" src="/static/unselected.png" v-else></image>
					</view>
				</view>
				<view class="payBtnView">
					<text @click="onPayData()">立即支付</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "payment-popup",
		props: {
			totalPrice: {
				type: [Number, String],
				default: '0.00'
			},
			isWechat: {
				type: Boolean,
				default: true
			},
			isAlipay: {
				type: Boolean,
				default: true
			},
			isBalance: {
				type: Boolean,
				default: true
			},
			payIndex: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				paymentPopup: false,
				balance: 0
			};
		},
		methods: {
			open() {
				this.paymentPopup = true;
				this.initUser();
			},
			close() {
				this.paymentPopup = false;
			},
			initUser() {
				let self = this
				self.$user.userInfo({}, false,false).then(res => {
					self.balance = res.data.balance;
				}).catch(res => {
					self.balance = 0;
				});
			},
			onPayIndex(index) {
				this.payIndex = index;
			},
			onPayData() {
				if(this.payIndex == -1){
					uni.showToast({
						title:'请选择支付方式',
						icon: 'none'
					})
					return
				}
				this.$emit('confirm', this.payIndex);
			}
		}
	}
</script>

<style scoped>
	.popupView {
		display: flex;
		flex-direction: column;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.exitView {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.exitIcon {
		width: 32rpx;
		height: 32rpx;
		padding: 30rpx;
	}

	.paymentPrice {
		text-align: center;
		font-size: 60rpx;
		font-weight: bold;
		color: #333333;
	}

	.paymentPrice text {
		font-size: 36rpx;
	}

	.paymentTips {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 50rpx;
		margin-left: 50rpx;
	}

	.payView {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		margin-left: 50rpx;
		margin-right: 30rpx;
	}

	.payIcon {
		width: 50rpx;
		height: 50rpx;
	}

	.payText {
		flex: 1;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
	}

	.checkIcon {
		width: 36rpx;
		height: 36rpx;
	}

	.payBtnView {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.payBtnView text {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #00A7EE, #00CEF7);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
